import styled from 'styled-components';
import logoPic from '../../statics/logo.png'


export const HeaderWrapper = styled.div`
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    z-index: 1;
`
export const Logo = styled.div` 
    height: 18px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`

export const Nav = styled.div`
    box-sizing: border-box;
    width: 960px;
    height: 100%;
    padding-right: 70px;
    margin: 0 auto;
`

export const NavItem = styled.div`
line-height: 56px;
padding: 0 15px;
font-size: 17px;
color: #333;
    &.left{
        float: left;
    }
    &.right{
        float: right;
        color: #969696;
    }
    &.active{
    color: #ea6f5a;
`

export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    box-sizing: border-box;
    width: 160px;
    height: 38px;
    margin-top: 9px;
    margin-left: 20px;
    padding: 0 30px 0 20px;
    color: #666;
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 19px;
    background: #eee;
    &::placeholder{
        color: #999;
    }
    &.focused{
        width: 240px;
       }
    &.slide-enter{
        transition: all 0.5s ease-out;
     }
     &.slide-enter-active{
        width: 240px;
     }
     &.slide-exit{
        transition: all 0.2s ease-out;
     }
     &.slide-exit-active{
        width: 160px;
     }
`
export const Addition = styled.div`
    position: absolute;
    top: 0;
    right: 0;
    height: 56px; 
`

export const Button = styled.div`
    float: right;
    margin-top: 9px;
    margin-right: 20px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 38px;
    border-radius: 19px;
    border: 1px solid #ec6149;
    &.reg{
        color: #ec6149;
    }
    &.writting{
        color: #fff;
        background: #ec6149;
    }
`
export const SearchWrapper = styled.div`
     position: relative;
     float:left;
     .zoom{
     position: absolute;
     right: 5px;
     bottom: 5px;
     width: 30px;
     line-height: 30px;
     border-radius: 15px;
     text-align: center;
     &.focused{
         background: #777;
         color: #fff;
        }
     }
`

export const SearchInfo = styled.div`
     position: absolute;
     left: 0;
     top: 56px;
     width: 240px;
     padding: 0 20px;
     border-radius: 3px;
     box-shadow: 0 0 8px rgba(0,0,0, .2);
     background: #fff;
`

export const SearchTitle = styled.div`
    float: left;
     margin-top: 20px;
     margin-bottom: 15px;
     line-height: 15px;
     font-size: 14px;
     color: #969696;
`

export const SearchInfoSwitch = styled.span`
     cursor: pointer;
     float: right;
     margin-top: 20px;
     font-size: 13px;
     .spin{
        display: inline-block;
        margin-top: 5px;
        margin-right: 5px;
        font-size: 12px;
        transition: all .2s ease-in;
        // transform: rotate(180deg);
        transform-origin: center center;
    }
`

export const SearchInfoList = styled.div`
    clear:both;
`

export const SearchInfoItem = styled.a`
     display: block;
     float: left;
     line-height: 20px;
     margin: 10px 5px;
     padding: 0 5px;
     font-size: 12px;
     color: #787878;
     border: 1px solid #ddd;
     border-radius: 3px;

`





























